import { useEffect, useState } from 'react'

import { ProColumns, ProTable } from '@ant-design/pro-components'
import { ProTableProps } from '@ant-design/pro-table/es/typing'
import { ParamsType } from '@ant-design/pro-provider'
import { v4 as uuid4v } from 'uuid'
import { isUndefined } from 'lodash-es'
import AutoSizeContainer from '@/components/SupperTable/components/AutoSizeContainer'

const SupperTable = <DataType extends Record<string, any>, Params extends ParamsType = ParamsType, ValueType = 'text'>(
	props: ProTableProps<DataType, Params, ValueType>,
) => {
	//debugger
	const uid = uuid4v()
	const [rootDomClassId, setRootDomClassId] = useState(uid)
	const [tableScrollHeight, setTableScrollHeight] = useState('0')
	console.log('rootDomClassId', rootDomClassId)

	const getHtmlElementViewHeight = (el: HTMLElement): number => {
		const elStyle = window.getComputedStyle(el)
		let marginTopHeight = parseInt(el.style.marginTop.replaceAll('px', ''))
		let marginBottomHeight = parseInt(el.style.marginBottom.replaceAll('px', ''))
		marginTopHeight = isNaN(marginTopHeight) ? 0 : marginTopHeight
		marginBottomHeight = isNaN(marginBottomHeight) ? 0 : marginBottomHeight
		return el.offsetHeight + marginTopHeight + marginTopHeight
	}
	/**
	 * 获取第一个表格的可视化高度
	 * @param {number} extraHeight 额外的高度(表格底部的内容高度 Number类型,默认为49)
	 * @param {domRootClassId} domRootClassId Table所在的组件的 class id
	 */
	const getTableScroll = (params: { domRootClassId: string; extraHeight?: number }): string => {
		let { domRootClassId, extraHeight } = params
		extraHeight = isUndefined(extraHeight) ? 49 : extraHeight
		const rootDom = document.getElementsByClassName(domRootClassId)[0]
		const containerDom = rootDom.parentElement
		const searchWrapperDom = rootDom.getElementsByClassName('ant-pro-table-search')[0] as HTMLElement
		const paginationWrapperDom = rootDom.getElementsByClassName('ant-pagination')[0] as HTMLElement
		const toolbarWrapperDom = rootDom.getElementsByClassName('ant-pro-table-list-toolbar')[0] as HTMLElement
		const tableHeaderWrapperDom = rootDom.getElementsByClassName('ant-table-header')[0] as HTMLElement
		const tableFooterWrapperDom = rootDom.getElementsByClassName('ant-table-footer')[0] as HTMLElement

		const containerHeight = containerDom?.clientHeight ?? 0
		const searchHeight = getHtmlElementViewHeight(searchWrapperDom)
		const toolbarHeight = getHtmlElementViewHeight(toolbarWrapperDom)
		const paginationHeight = getHtmlElementViewHeight(paginationWrapperDom)
		const tableHeaderHeight = getHtmlElementViewHeight(tableHeaderWrapperDom)
		const tableFooterHeight = getHtmlElementViewHeight(tableFooterWrapperDom)
		const height = `${
			containerHeight - searchHeight - toolbarHeight - tableHeaderHeight - tableFooterHeight - paginationHeight - extraHeight
		}px`
		// 空数据的时候表格高度保持不变,暂无数据提示文本图片居中
		if (rootDom) {
			let placeholder = rootDom.getElementsByClassName('ant-table-placeholder')[0] as HTMLDivElement
			if (placeholder) {
				placeholder.style.height = height
				placeholder.style.display = 'flex'
				placeholder.style.alignItems = 'center'
				placeholder.style.justifyContent = 'center'
			}
		}
		return height
	}

	const resizeSize = () => {
		const tableScrollHeight = getTableScroll({ domRootClassId: rootDomClassId })
		console.log('tableScrollHeight', tableScrollHeight)
		setTableScrollHeight(tableScrollHeight)
	}

	const onWindowResize = () => {
		resizeSize()
	}

	useEffect(() => {
		setTimeout(() => {
			resizeSize()
		}, 5)

		window.addEventListener('resize', onWindowResize)
		return () => {
			window.removeEventListener('resize', onWindowResize)
		}
	}, [])

	const onSearchBtnCollapse = (collapsed: boolean) => {
		resizeSize()
	}

	const columns: ProColumns<DataType, ValueType>[] = [
		{
			title: '序号',
			width: 60,
			render: (text, record, index) => {
				return `${index + 1}`
			},
		},

		...props.columns!,
	]

	const proTableProps: ProTableProps<DataType, Params, ValueType> = Object.assign(
		{
			tableAlertRender: false,
			tableAlertOptionRender: false,
			rowSelection: { alwaysShowAlert: false },
			bordered: true,
			className: `${props.className ?? ''} ${rootDomClassId}`,
			defaultSize: 'small',
			scroll: { x: props.scroll?.x, y: tableScrollHeight },
			pagination: {
				position: ['bottomRight'],
				defaultPageSize: 10,
				defaultCurrent: 1,
				showSizeChanger: true,
				showQuickJumper: true,
				showTotal: (total: number, range: number[]) => {
					return `${range[0]}-${range[1]} of ${total}`
				},
			},
			search: {
				onCollapse: onSearchBtnCollapse,
			},
			footer: () => <div>&nbsp;</div>,
		},
		props,
		{
			columns: columns,
		},
	)
	return (
		<AutoSizeContainer>
			<ProTable {...proTableProps} />
		</AutoSizeContainer>
	)
}

export default SupperTable
